@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  font-family: "MS Sans Serif", "Microsoft Sans Serif", Arial, sans-serif;
  color: #000000;
  height: 100%;
  overflow: auto;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* Windows 95 desktop background */
.win95-desktop-bg {
  background-image: url("/images/win95-desktop.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Windows 95 button style */
.win95-button {
  position: relative;
  border-width: 2px;
  border-style: solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  box-shadow: 1px 1px 0px #000000;
  outline: 1px solid #000000;
}

.win95-button:active {
  border-color: #808080 #ffffff #ffffff #808080;
  box-shadow: -1px -1px 0px #000000;
}

/* Windows 95 inset field style */
.win95-inset {
  border-width: 2px;
  border-style: solid;
  border-color: #808080 #ffffff #ffffff #808080;
  box-shadow: inset 1px 1px 0px #000000;
}

/* Windows 95 raised border style */
.win95-border {
  position: relative;
  border-width: 2px;
  border-style: solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  box-shadow: 1px 1px 0px #000000;
}

/* Pixel art text style */
.pixel-text {
  font-family: "MS Sans Serif", "Microsoft Sans Serif", Arial, sans-serif;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Navigation bar styles */
.nav-link {
  padding: 0.5rem 1rem;
  color: white;
  transition: background-color 0.2s;
}

.nav-link:hover {
  background-color: #4a7a7c;
}

.nav-link.active {
  background-color: #c0c0c0;
  color: black;
  border-width: 2px;
  border-style: solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  box-shadow: 1px 1px 0px #000000;
}

/* Scrollbar styling for Windows 95 look */
::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

::-webkit-scrollbar-track {
  background: #c0c0c0;
  border-left: 1px solid #808080;
}

::-webkit-scrollbar-thumb {
  background: #c0c0c0;
  border-width: 2px;
  border-style: solid;
  border-color: #ffffff #808080 #808080 #ffffff;
}

::-webkit-scrollbar-button {
  background: #c0c0c0;
  border-width: 2px;
  border-style: solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  height: 16px;
  width: 16px;
  display: block;
}

::-webkit-scrollbar-button:vertical:start {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpolygon points='8,4 4,8 12,8' fill='black'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

::-webkit-scrollbar-button:vertical:end {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpolygon points='8,12 4,8 12,8' fill='black'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

::-webkit-scrollbar-button:horizontal:start {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpolygon points='4,8 8,4 8,12' fill='black'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

::-webkit-scrollbar-button:horizontal:end {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpolygon points='12,8 8,4 8,12' fill='black'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
